Getting Started

Theme Info

Created: 18/04/2016

Thank you for Downloading my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my contact page. Thanks so much!

If you have any problem about this template then please visit ThemeXpose.com

Note : Premium and lifetime support only delivered to Full version buyers.

But this is only free version (Free Template Will Contain Non Removable Credits and limited features).

It is forbidden to remove the credit link due to the elimination of the credit links will make your blog to redirect ThemeXpose Official site. For those who want to remove can pay $ 6.95.

Buy our Full Version and get:

1.Remove Footer credits

2.One time payment

3.For Unlimited Domains

4.Lifetime Premium Support

5.No Encrypted Scripts

6.Lifetime Template Updates

7.And Much More....

Buy now from ThemeXpose.com

Dens is a clean and responsive Blogger template with Responsive layout and suited for all blog. It's design with minimalist and simple color combination, clean and modern look, SEO Optimized, and has been built by using some of the most popular current design trends.

Features

  • Responsive
  • SEO
  • Dynamic Heading
  • 2 Column Style
  • Clean Typography
  • Minimalist
  • Homepage Share Button
  • Responsive Dropdown Navigation
  • Light Base Theme Color
  • Breadcrumbs
  • Related Posts with Thumb
  • Search Box
  • Social Share Button
  • Numbered Page Navigation
  • Custom 404 Page
  • Smooth Scroll back To Top
  • Custom Subscribe Box Widget
  • Multi Author Box
  • And more..

Installation

When you are ready to install a theme, you must first upload the theme file. The theme files can be uploaded in two ways:

  • Blogger Upload : Go to your dashboard > Template > Backup / Restore > Upload the .xml.
  • Copy And Paste : By open your template by Notepad and copy the entire text and paste it into Template in your dashboard.

Now click on "Browse" and select from your drive Dens-Blogger-Template.xml
After click on "Upload" and wait to finish upload.

Or click on "Edit HTML"

And open .xml file by Notepad and select all "Ctrl+A", and copy entire text and paste it here :


Customize Theme

To these phase we will customize the template and install some widgets and add some Html.

Header Options

Logo Settings :

In your dashboard Select "Layout".

Upload Your Logo Header : In You Blog (Header), Click on "Edit" and applicate all settings below :

Settings Your Blog Posts :

In Blog Posts, Click on "Edit" and applicate all settings below :

Main Navigation :

Go to Blogger Dashboard > Template > "Edit HTML"

Now Search the below mention code ( ctrl + f ), then replace the # with your navigation urls.

<nav id='nav'>
<div class='container-wrapper'>
<nav id='main-nav'>
 
<div class='main-menu'><ul class='menu' id='menu-main'>
<li><a class='active' expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>Business</a>
<ul class='sub-menu'>
 <li><a href='#'>Featured Image</a></li>
 <li><a href='#'>Slider</a></li>
 <li><a href='#'>SoundCloud</a></li>
 <li><a href='#'>Video</a></li>
</ul>
</li>
 <li><a href='#'>Fashion</a>
</li>
 <li><a href='#'>Sports</a>
<ul class='sub-menu'>
 <li><a href='#'>Full Width</a></li>
 <li><a href='#'>Right Sidebar</a></li>
 <li><a href='#'>Left SIdebar</a></li>
</ul>
</li>
<li><a href='#'>Games</a></li>
<li><a href='#'>Technology</a></li>
<li><a href='#'>Download</a></li>  
Footer Navigation :

Go to Blogger Dashboard > Template > "Edit HTML"

Now Search the below mention code ( ctrl + f ), then replace the # with your navigation urls.

<nav class='top-menu1'>
          <!-- primary navigation menu start -->
          <ul class='menubar'>
            <li>
              <a href='#'>
                Home
              </a>
            </li>
            <li>
              <a href='#'>
                About
              </a>
            </li>
            <li>
              <a href='#'>
                Contact
              </a>
            </li>
            <li>
              <a href='#'>
                Error Page
              </a>
            </li>
     </ul></nav>
<li><a href='#'>Download</a></li>  
Page Navigation :

Go to Blogger Dashboard > Template > "Edit HTML"

Now Search the below mention code ( ctrl + f ), then replace the perpage=7;(Post Per page) and numpages=5;( No. of pages in page navigation)

 <script type='text/javascript'>
        var pageNaviConf = {
            perPage: 5,
            numPages: 9,
            firstText: "First",
            lastText: "Last",
            nextText: "Next",
            prevText: "Prev"
        }
</script>

Top Social Icons

To Edit Top Social icons in this theme you can follow these steps:
  1. On Blogger Dashbord Click Layout
  2. Top Social Widget Click Edit button
  3. Add your social media name and link >> ADD LINK >> Once you added all the links SAVE.

Use http:// or https:// where applicable.

AVAILABLE ICONS: Behance Facebook Twitter Bloglovin Dribbble Flickr GooglePlus Instagram Linkedin Pinterest Vimeo Youtube Vine Soundcloud Goodreads Deviantart Foursquare Reddit Tumblr Spotify Twitch Vk Mailto shop Rss Etsy

To setup News Ticker :

Go to Blogger Dashboard > Template > "Edit HTML"

Now Search the below mention code ( ctrl + f ), then replace the url with your blog URL

 <script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://den-themexpose.blogspot.in/', // Replace With your Blog Url
    numpostx 	= 20; // Maximum Post

Post Page

Home Layout

To customize Styles Layout Widgets follow these steps:

1. Go To Blogger >> Layout

2. Then choose the style widget which you want to Customize Then Click On Edit Button.

Then You will See a Popup Window Like Image Given Below. Then Enter your label or category name here. Then Press Save Button.

Same AS above you Have to Customize All other STYLE WIDGETS.

Video for all Style Box setup

Only in Full version


Widget

Recent post

1. Go to Blogger Dashboard > Layout > Add a Widget on sidebar > Now right the below code

2. Save It

<div id="random-posts"> 

<script style="text/javascript"> 
 var numposts_gal = 4; 
</script> 

<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=99"></script> 
</div>

Sidebar Social widget

1. Go to Blogger Dashboard > Layout > Follow Us widget > click on edit button

2. Now copy the below mention code and paste into widget.

3. Change the # with your social url and change the Number of followers too.

4. Save It

<div class="social-counter-metro">
<ul class="clearfix">
 
<li class="fb-wrp">
<div class="btn-count">
<div class="social-counter-metro mask">
<span>Like</span>
<a href="#" target="_blank" class="more"></a>
</div>
<div class="facebook">
<i class="facebook-sicon-48-white"></i>
<span>1200</span>
<span class="fans">Fans</span>
</div>
</div>
</li>
 
<li class="tr-wrp">
<div class="btn-count">
<div class="social-counter-metro mask">
<span>Follow</span>
<a href="http://twitter.com/serpentsoft" target="_blank" class="more"></a>
</div>
<div class="twitter">
<i class="twitter-sicon-48-white"></i>
<span>14</span>
<span class="fans">Followers</span>
</div>
</div>
</li>
 
<li class="yt-wrp">
<div class="btn-count">
<div class="social-counter-metro mask">
<span>Subscribe</span>
<a href="#" target="_blank" class="more"></a>
</div>
<div class="youtube">
<i class="youtube-sicon-48-white"></i>
<span>4500</span>
<span class="fans">Subscribers</span>
</div>
</div>
</li>
 
<li class="vm-wrp">
<div class="btn-count">
<div class="social-counter-metro mask">
<span>Subscribe</span>
<a href="#" target="_blank" class="more"></a>
</div>
<div class="vimeo">
<i class="vimeo-sicon-48-white"></i>
<span>1</span>
<span class="fans">Subscribers</span>
</div>
</div>
</li>
 
<li class="drb-wrp">
<div class="btn-count">
<div class="social-counter-metro mask">
<span>Follow</span>
<a href="#" target="_blank" class="more"></a>
</div>
<div class="dribbble">
<i class="dribbble-sicon-48-white"></i>
<span>100</span>
<span class="fans">Followers</span>
</div>
</div>
</li>
 
<li class="rs-wrp">
<div class="btn-count">
<div class="social-counter-metro mask">
<span>Subscribe</span>
<a href="#" target="_blank" class="more"></a>
</div>
<div class="rss">
<i class="rss-sicon-48-white"></i>
<span>Subscribe</span>
<span class="fans">To RSS Feed</span>
</div>
</div>
</li>
</ul>
</div>

ShortCodes

Alert Box
/*----success message----*/
  <div class="alert-message success">
  success message : You successfully read this important message. <i class="fa fa-check-circle"></i>
  </div>
  
  /*----Alert message-----*/
  <div class="alert-message alert">
  Alert message : This alert needs your attention. <i class="fa fa-info-circle"></i>
  </div>
  
  /*----Warning message-----*/
  <div class="alert-message warning">
  Warning message : Warning! Best check yo self. <i class="fa fa-exclamation-triangle"></i>
  </div>
  
  /*----Error message-----*/
  <div class="alert-message error">
  Error message : Oh snap! Change a few things up. <i class="fa fa-exclamation-circle"></i>
  </div>

Mobile Version ( Responsive Design Option )

Mobile Responsive

As default, Blogger will use its own template for you blog on mobile. So if you want to use Responsive template on mobile devices, please enable it first.

Access your Template menu and click on Gear button of Mobile template.

In Choose mobile template window, check "No. Show desktop template on mobile devices." option, then click Save button.

Dens free version - Themexpose.com

Top